<!--
 * @Author       : xiangmin
 * @File         : 面包屑
 * @Date         : 2023-01-17 23:45:10
 * @LastEditors  : xiangmin
 * @LastEditTime : 2023-07-15 23:00:28
-->
<!-- prettier-ignore -->
<template>
	<div class="page-header py15 bg-white px-25 flex flex-col justify-center" v-if="page">
		<a-breadcrumb v-if="page.crumb?.length">
			<a-breadcrumb-item
				v-for="(item, index) in page.crumb"
				:key="index"
			>
				<RouterLink
					v-if="item.path"
					:to="{ path: item.path, replace: true }"
				>
					{{ item.label }}
				</RouterLink>
				<template v-else>
					{{ item.label }}
				</template>
			</a-breadcrumb-item>
		</a-breadcrumb>
		<a-page-header
			:title="pageTitle || page.title"
			:sub-title="page.subTitle"
			v-on="backEvent"
		>
			<template v-for="(_, name) in $slots" #[name]>
				<slot :name="name"></slot>
			</template>
		</a-page-header>
	</div>
</template>

<script setup lang="ts">
import { useHomeStore } from '@/store'
import { storeToRefs } from 'pinia'

const router = useRouter()
const { page } = defineProps<{
	page?: PageHeaderProps
}>()

const backEvent = computed(() => {
	if (page?.back) {
		return typeof page?.back === 'boolean'
			? { back: () => router.back() }
			: { back: () => (page?.back as Function)() }
	} else {
		return {}
	}
})

const { pageTitle } = storeToRefs(useHomeStore())
</script>
<style scoped lang="less">
.page-header {
	border-bottom: 1px solid #f5f5f5;
}

:deep(.ant-page-header) {
	padding: 0 !important;

	.ant-page-header-heading-left {
		margin: 0 !important;
	}

	.ant-page-header-heading-title {
		line-height: 26px;
	}
}
</style>
